Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 <svg class="ping-pong" viewBox="0 0 128 128" width="128px" height="128px">
	<defs>
		<linearGradient id="ping-pong-grad" x1="0" y1="0" x2="1" y2="1">
			<stop offset="0%" stop-color="#000" />
			<stop offset="100%" stop-color="#fff" />
		</linearGradient>
		<mask id="ping-pong-mask">
			<rect x="0" y="0" width="128" height="128" fill="url(#ping-pong-grad)" />
		</mask>
	</defs>
	<g fill="var(--primary)">
		<g class="ping-pong__ball-x">
			<circle class="ping-pong__ball-y" r="10" />
		</g>
		<g class="ping-pong__paddle-x">
			<rect class="ping-pong__paddle-y" x="-30" y="-2" rx="1" ry="1" width="60" height="4" />
		</g>
	</g>
	<g fill="hsl(163,90%,40%)" mask="url(#ping-pong-mask)">
		<g class="ping-pong__ball-x">
			<circle class="ping-pong__ball-y" r="10" />
		</g>
		<g class="ping-pong__paddle-x">
			<rect class="ping-pong__paddle-y" x="-30" y="-2" rx="1" ry="1" width="60" height="4" />
		</g>
	</g>
</svg> 
</body>
</html>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--hue: 223;
	--bg: hsl(var(--hue),90%,90%);
	--fg: hsl(var(--hue),90%,10%);
	--primary: hsl(var(--hue),90%,50%);
	--trans-dur: 0.3s;
	font-size: calc(16px + (32 - 16) * (100vw - 320px) / (2560 - 320));
}
body {
	background-color: var(--bg);
	color: var(--fg);
	display: flex;
	font: 1em/1.5 sans-serif;
	height: 100vh;
	transition:
		background-color var(--trans-dur),
		color var(--trans-dur);
}

$debug: false;
$linear: linear;
$easeIn: cubic-bezier(0.32,0,0.67,0);
$easeOut: cubic-bezier(0.33,1,0.68,1);

.ping-pong {
	@if $debug == true {
		outline: 1px solid;
		overflow: visible;
	}
	display: block;
	margin: auto;
	width: 8em;
	height: 8em;

&__ball,
	&__paddle {
		&-x,
		&-y {
			animation: ping-pong-ball-x 1.5s $linear infinite;
		}
	}
	&__ball {
		&-y {
			animation-name: ping-pong-ball-y;
		}
	}
	&__paddle {
		&-x {
			animation-name: ping-pong-paddle-x;
			animation-timing-function: $easeOut;
		}
		&-y {
			animation-name: ping-pong-paddle-y;
		}
	}
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: hsl(var(--hue),90%,10%);
		--fg: hsl(var(--hue),90%,90%);
	}
}

/* Animation */
@keyframes ping-pong-ball-x {
	from,
	to {
		transform: translate(40px,80px);
	}
	50% {
		transform: translate(88px,80px);
	}
}
@keyframes ping-pong-ball-y {
	from,
	50%,
	to {
		animation-timing-function: $easeOut;
		transform: translate(0,0);
	}
	25%,
	75% {
		animation-timing-function: $easeIn;
		transform: translate(0,-68px);
	}
}
@keyframes ping-pong-paddle-x {
	from,
	to {
		transform: translate(36px,92px) rotate(6deg);
	}
	50% {
		transform: translate(92px,92px) rotate(-6deg);
	}
}
@keyframes ping-pong-paddle-y {
	from,
	50%,
	to {
		animation-timing-function: $easeOut;
		transform: translate(0,0);
	}
	25%,
	75% {
		animation-timing-function: $easeIn;
		transform: translate(0,28px);
	}
}

Frontend Forever App